<template>
  <CPageLayout
    :headerConfig="headerConfig"
    :body-style="bodyStyle"
    :body-wrapper-style="bodyWrapperStyle"
  >
    <template #headerDesc>
      <div class="g-flex-start-center">
        <span>发起时间：{{ empty(processInfo?.startTime) }}</span>
        <el-divider direction="vertical"></el-divider>
        <span
          >发起人：{{ empty(processInfo?.starter) }}({{ empty(processInfo?.starterEmail) }})</span
        >
        <el-divider direction="vertical"></el-divider>
        <span>发起人企业：{{ empty(processInfo?.starterEnterprise) }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>事项编号：{{ empty(processInfo?.businessKey) }}</span>
      </div>
    </template>
    <template #headerRightBtn>
      <FlowFooter
        :process-instance-id="(id as string)"
        :flow-content-ref="flowContentRef"
        :page-type="(type as keyof typeof TodoTaskStatusEnum)"
      />
    </template>
    <div class="todo-list-detail-wrapper g-flex">
      <div
        class="todo-list-detail-container"
        :class="activeCollapse ? 'todo-list-detail-container--collapse' : ''"
        :loading="pageLoading"
      >
        <AuditResult :auditInfo="processInfo" />
        <template v-if="Object.keys(processInfo).length">
          <div class="flow-content">
            <component
              :is="FlowContentComponent"
              ref="flowContentRef"
              :businessKey="processInfo.businessKey"
              v-if="FlowContentComponent"
            >
            </component>
          </div>
        </template>
      </div>
      <AuditHistory
        :progressList="progressList"
        :loading="loading"
        v-model:collapse="activeCollapse"
        :isShowTips="isShowTips"
      ></AuditHistory>
    </div>
  </CPageLayout>
</template>
<script lang="ts">
export default {
  name: 'TodoListDetail'
};
</script>
<script lang="ts" setup>
import { ref, onMounted, provide, computed } from 'vue';
import { useMessage } from '@/hooks/useMessage';
import { useRoute } from 'vue-router';
import FlowFooter from './components/FlowFooter/index.vue';
import AuditResult from './components/AuditResult/index.vue';
import AuditHistory from './components/AuditHistory/index.vue';
import { useHistory } from './useHistory';
import { IProcessInfo } from '@/apis/todo/model/flowModel';
import { getProcessInfo } from '@/apis/todo/flow';
import {
  TodoTaskStatusEnum,
  ProcessDefinitionKeyMap,
  ProcessDefinitionKeyEnum
} from '@/constants/enum';
import { TODO_DETAIL_ROOT } from './types';
import FlowComponents from './FlowContentComponents';
import { config } from './FlowContentComponents';
import { empty } from '@/utils/index';
import { CPageLayout, CPageHeaderComplexProps } from '@/components/CPageLayout';

const headerConfig = computed<CPageHeaderComplexProps>(() => {
  return {
    title: `${empty(processInfo.value.businessName)} _ ${empty(
      processInfo.value.processDefinitionName
    )}`,
    icon:
      processInfo.value?.processDefinitionKey === 'SUPPLIER_FORM_APPROVAL'
        ? 'todo_icon_02.png'
        : 'todo_icon_01.png'
  };
});

const bodyWrapperStyle = 'padding: 0;';
const bodyStyle = 'background: #F3F7FB; min-height: 100%;';

const { createMessage } = useMessage();
const route = useRoute();
const pageLoading = ref(false);
const flowContentRef = ref();
const processInfo = ref({} as IProcessInfo);
// 页面标题
const pageTitle = computed(() => {
  if (processInfo.value?.processDefinitionKey) {
    return ProcessDefinitionKeyMap[processInfo.value?.processDefinitionKey] + '详情';
  } else {
    return '-';
  }
});

const isShowTips = computed(() => {
  return processInfo.value?.processDefinitionKey === 'SUPPLIER_FORM_APPROVAL';
});
const routeQuery = route.query;
const id = routeQuery?.id || '';
const type = routeQuery?.type || '';
const taskId = routeQuery?.taskId || '';
const { progressList, loading, loadHistory } = useHistory(id as string);

// 流程内容组件
const FlowContentComponent = computed(() => {
  if (!processInfo.value?.processDefinitionKey) return '';
  return FlowComponents[config[processInfo.value.processDefinitionKey].componentName];
});
// 获取详情信息
const getDetailInfo = async () => {
  try {
    pageLoading.value = true;
    if (taskId) {
      processInfo.value = await getProcessInfo(id as string, taskId as string);
    } else {
      processInfo.value = await getProcessInfo(id as string);
    }
    pageLoading.value = false;
  } catch (error) {
    pageLoading.value = false;
    console.log('error', error);
  }
};
onMounted(() => {
  if (!id || !type) {
    createMessage.error('系统异常，请退出重试或联系管理员');
    return;
  }
  getDetailInfo();

  loadHistory();
});

// NOTE 为详情页面提供全局参数
provide(TODO_DETAIL_ROOT, {
  /**
   * 页面类型（待处理、已处理等）
   */
  pageType: (type as keyof typeof TodoTaskStatusEnum) || '',
  /**
   * 工作流详情
   */
  processInfo
});

const activeCollapse = ref(false);
</script>
<style lang="scss" scoped>
.todo-list-detail-container {
  margin: 16px;
  width: calc(100% - 320px - 32px);
  // height: max-content;
  // min-height: calc(100vh - 50px - 40px);
  background: #fff;
  transition: width 0.3s;
  &.todo-list-detail-container--collapse {
    width: calc(100% - 32px);
    transition: width 0.3s;
  }
  .flow-detail {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  .detail {
    border-top: 1px solid #ebeef5;
    padding: 24px 24px 18px;
    background: #ffffff;
    border-radius: 0 0 4px 4px;
  }
  .label {
    display: inline-block;
    width: 94px;
    text-align: left;
    font-size: 14px;
    color: #51596c;
  }
  .des {
    font-size: 14px;
    color: #212529;
    display: inline-block;
  }
  .circle {
    width: 14px;
    height: 14px;
  }
}
.flow-content {
  margin-bottom: 60px;
  width: 100%;
  height: auto;
  background: url('~@/assets/images/todo_bg_01.png') top right no-repeat, #fff;
  background-size: 600px 200px;
  border-radius: 3px;
  opacity: 0.97;
  backdrop-filter: blur(34px);
  .flow-content-body {
    padding: 12px 24px 62px;
  }
}
</style>
